<!DOCTYPE html>
<html>
<head>
    <title>Roles</title>
</head>
<body>
<div id="user-name"></div>
<div id="token"></div>
<div id="local-storage-token"></div>
<div id="session-storage-token"></div>

<form action="/set-token" method="post">
    <input type="text" name="token">
    <input type="submit" value="SetToken">
</form>

<script>
    document.querySelector('form').addEventListener('submit', function () {
        const name = document.querySelector('#user-name').textContent;

        sessionStorage.setItem('token', 'qwerty' + name);
    });
</script>

<div id="element-on-page">
</div>

<iframe id="iframe" src="./iframe.html"></iframe>
<input id="show-alert" type="button">

<script>
    function getCookie (name) {
        const kvs = document.cookie.split(';')
            .map(function (cookie) {
                return cookie.trim().split('=');
            });

        for (let i = 0; i < kvs.length; i++) {
            if (kvs[i][0] === name)
                return kvs[i][1];
        }

        return null;
    }

    document.querySelector('#user-name').textContent = getCookie('name');
    document.querySelector('#token').textContent = getCookie('token');
    document.querySelector('#local-storage-token').textContent = localStorage.getItem('token');
    document.querySelector('#session-storage-token').textContent = sessionStorage.getItem('token');

    document.querySelector('#show-alert').addEventListener('click', function () {
        alert('Hey!');
    });

</script>

</body>
</html>
